<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入所需要的文件-->

    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../js/bootstrap.js"></script>


    <script src="../bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script src="../bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script src="../bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="../bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="../bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" />

    <script src="../bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="../bower_components/moment/min/moment.min.js"></script>
    <script src="../bower_components/moment/min/locales.min.js"></script>
    <script src="../bower_components/bootbox/bootbox.min.js"></script>
    <script src="../bower_components/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="../bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="../bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="../bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../bower_components/moment/min/moment-with-locales.min.js"></script>


    <script type="application/javascript">
        $(function () {
            //读取数据类型
            $.ajax({
                type: "get",	//提交类型
                dataTyp: "json",//数据类型
                url: "../json/dianbiao.json",//数据访问路径
                success: function (reslt) {//返回成功后所调用得函数
                    creteTable(reslt);//函数调用
                },
                error: function (date) {//返回失败所调用得函数
                    alert(date);
                }
            });

            /*新增点击按钮事件*/
            $("#btnNew").click(function () {
                $("#Divdata").modal();
            });
            /*修改点击按钮事件*/
            $("#btnNew").click(function () {
                $("#Divdata").modal();
            });
            /*删除点击按钮事件*/
            $("#btnNew").click(function () {
                $("#Divdata").modal();
            });

        });


        /*将数据绑定在表格上*/
        function creteTable(userData) {
            $("#tblUser").bootstrapTable("destroy");//清空表格
            $("#tblUser").bootstrapTable({
                data: userData,
                sidePagination: "client",
                pageSize: "10", //分页
                pagination: true,
                singleSelect: true,
                columns: [
                    {
                        field: "name_clock",
                        title: "电表",
                        align: "center"
                    },
                    {
                        field: "lightning_use",
                        title: "耗电/度",
                        align: "center"
                    },
                    {
                        field: "price_lightning",
                        title: "电价 度/元",
                        align: "center"
                    },
                    {
                        field: "month",
                        title: "月份",
                        align: "center"
                    },
                    {
                        field: "money",
                        title: "总额",
                        align: "center",
                        formatter: function (value, row, index) {
                            return row["lightning_use"] * row["price_lightning"];
                        }
                    }
                ]
            });
        }

        $("#btnoff").click(function () {
            $("").val("");
            $("").val("");
        });
    </script>
</head>

<body style="background: #0f0f0f">

<div class="container-fluid">
    <!--查询区域开始-->
    <!--列表开始-->
    <div class="row col-md-10">
        <table id="tblUser"></table>
    </div>
    <!--列表结束-->
    <center>
        <div class="row col-md-10">
            <div id="Select" class="form-inline">
                <div class="form-group">
                    <label class="control-label" for>电表名称</label>
                    <input type="text" class="form-control" id="txtUsername1" name="username" maxlength="20"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" id="btnSelect1">查询</button>
                </div>
                <div class="form-group">
                    <label class="control-label" for>月份</label>
                    <input type="text" class="form-control" id="txtUsername2" name="username" maxlength="20"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" id="btnSelect2">查询</button>
                </div>
            </div>
        </div>

        <!--查询结束-->

        <!--功能区域开始-->
        <div class="row col-md-10" style="margin-top: 20px;">
            <button class="btn btn-success" id="btnNew">远程抄表</button>
            <!--<button class="btn btn-warning" id="btnUpdate">修改</button>-->
            <!--<button class="btn btn-danger" id="btnDel">删除</button>-->
        </div>
        <!--功能区域结束-->

    </center>
</div>
<!--模态框处理-->
<div class="modal fade" id="Divdata" tabindex="-1" aria-labellebdy="myModelLable" aria-hidden="hidden">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--模态标题-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
                <h4 class="modal-title">信息</h4>
            </div>
            <!--主体表单-->
            <div class="modal-body form-inline">
                <div class="form-group">
                    <label class="control-label" for>电表</label>
                    <input type="text" class="form-control" id="txtDatausername1" name="Datausername" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class="control-label" for>耗电/度</label>
                    <input type="text" class="form-control" id="txtDatausername2" name="Datausername" maxlength="20"/>
                </div>
                <br/><br/>
                <div class="form-group">
                    <label class="control-label" for>电价</label>
                    <input type="text" class="form-control" id="txtDatausername3" name="Datausername" maxlength="20"/>
                </div>
                <div class="form-group">
                    <label class="control-label" for>月份</label>
                    <!--<input type="date" class="form-control" id="txtDatausername" name="Datausername" maxlength="20"/>-->
                    <!-- 时间开始 -->
                    <div class="form-group">
                        <div class="input-group date form_date ">
                            <input id="BeginTime" class="form-control" type="text" value="" readonly placeholderl="" />
                            <span class="input-group-addon" style="width: 25%;"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <script type="application/javascript">
                        //必须在初始化控件之前进行设置
                        $(".form_date").datetimepicker({
                            language: 'zh-CN', //中英文
                            weekStart: 1, //一周从哪天开始
                            todayBtn: 1, //当天日期按钮
                            autoclose: 1, //选定时间后是否自动关闭
                            todayHighlight: 1, //当天日期高亮
                            startView: 2, //选完时间首先显示的视图
                            minView: 2, //最精确的时间
                            forceParse: 0,//制解析
                            format: "yyyy-mm-dd", //显示格式
                            pickerPosition: "bottom-left" //选择框位置
                        });
                    </script>
                    <!-- 时间结束 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnSave" class="btn btn-info" data-dismiss="modal" aria-hidden="true"
                        onclick="msave()">保存
                </button>
                <button type="button" id="btnoff" class="btn btn-default" data-dismiss="modal" aria-hidden="true">重置
                </button>
            </div>
        </div>
    </div>
</div>
</body>

</html>